<template>
	<view class="container">
		<view class="countDown">￥{{order.pay_price}}</view>
		<view class="remainder-time">
			<text>支付时间剩余：</text>
			<u-count-down :time=" 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond @change="onChange">
				<view class="time">
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
					</view>
					<text class="time__doc">:</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.minutes }}</text>
					</view>
					<text class="time__doc">:</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.seconds }}</text>
					</view>
				</view>
			</u-count-down>
		</view>
		<view class="payment">
			<view class="pay-title">支付方式</view>
			<view class="pay-content" v-for="(item,index) in payList" :key="index">
				<view class="pay-img">
					<image :src="item.src" mode=""></image>
					<view class="pay-type">{{item.name}}</view>
				</view>
				<u-checkbox-group @change="handleChangePay(item)">
					<u-checkbox :checked="item.checked" activeColor="red" shape="circle"></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<!-- 付款 -->
		<view class="option" @click="handlePayMent">付款</view>
	</view>
</template>

<script>
	import { order } from '../../api';
	export default {
		onLoad() {
			this.getOrderDetail();
		},
		data() {
			return {
				order: {},
				timeData: {},
				checked: 0,
				payList: [
					{ name: '微信支付', src: '../../static/img/payment/weixin.png', paytype: 'weixin', checked: true },
					{ name: '支付宝支付', src: '../../static/img/payment/zfb.png', paytype: 'zhifubao', checked: false },
					{ name: '银联支付', src: '../../static/img/payment/yinlian.png', paytype: 'yinlian', checked: false },
					{ name: '余额支付', src: '../../static/img/payment/yue.jpg', paytype: 'yue', checked: false },
				],
				payment: {
					uni: '',
					paytype: '',
					type: 0,
				}
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			getOrderDetail() {
				this.order = uni.getStorageSync('orderDetail');
			},
			handleChangePay(item) {
				this.payList.forEach(obj => {
					if (obj.name === item.name) {
						item.checked = !item.checked;
					} else {
						obj.checked = false;
					}
				})
			},
			async handlePayMent() {
				let obj = this.payList.find(item => item.checked === true);
				if (obj) {
					this.payment.paytype = obj.paytype;
					this.payment.uni = this.order.order_id;
					let { status, msg, data } = await order.pay_order(this.payment);
					if (status === 200) {
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'success'
						})
						uni.switchTab({
							url: '/pages/user/center/center',
						})
					} else {
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'error'
						});
						uni.switchTab({
							url: '/pages/user/center/center',
						})
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: '请至少选择一样付款方式！',
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.container {

		.countDown {
			text-align: center;
			padding: 30rpx;
			font-size: 50rpx;
			color: red;
		}

		.remainder-time {
			display: flex;
			justify-content: center;
			align-items: center;
			color: red;
			background-color: #fff;
			width: 60%;
			margin: 0 auto;
			padding: 15rpx;
			border-radius: 50rpx;

			.time {
				@include flex;
				align-items: center;

				&__custom {
					margin-top: 4px;
					width: 22px;
					height: 22px;
					background-color: red;
					border-radius: 4px;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;

					&__item {
						color: #fff;
						font-size: 12px;
						text-align: center;
					}
				}

				&__doc {
					color: $u-primary;
					padding: 0px 4px;
				}

				&__item {
					color: #606266;
					font-size: 15px;
					margin-right: 4px;
				}
			}
		}

		.pay-title {
			padding: 30rpx;
		}

		.payment {
			background-color: #fff;
			margin: 30rpx;

			.pay-content {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 30rpx;
				border-bottom: 3rpx solid #eee;

				.pay-img {
					width: 600rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 30rpx;
					}
				}

			}
		}

		.option {
			width: 708rpx;
			height: 98rpx;
			background-color: #c55a5c;
			margin: 0 auto;
			position: absolute;
			bottom: 170rpx;
			left: 21rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 98rpx;
			border-radius: 15rpx;
		}
	}
</style>